<template>
  <div style="display: flex;justify-content: center">
    <el-form :model="examForm" :rules="rules" ref="examForm" label-width="80px">
      <el-form-item label="考试名称" prop="name">
        <el-input v-model="examForm.name" placeholder="请输入考试名称"></el-input>
      </el-form-item>
      <el-form-item label="考试班级" prop="classIds">
        <el-select v-model="examForm.classIds" placeholder="请选择考试班级" multiple clearable filterable :disabled="examId!==''" style="width: 100%;">
          <el-option-group v-for="group in classOptions" :key="group.deptName" :label="group.deptName">
            <el-option v-for="item in group.classList" :key="item.classId" :label="item.className" :value="item.classId"/>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="考试课程" prop="courseOpt">
        <el-cascader style="width: 100%" v-model="examForm.courseOpt" :options="courseOptions" :disabled="examId!==''"
                     :props="{ multiple: true }" clearable filterable placeholder="请选择考试课程" show-all-levels/>
      </el-form-item>
      <el-form-item label="考试日期" prop="startTime">
        <el-date-picker v-model="examForm.examDate" type="date" placeholder="选择考试日期" value-format="yyyy-MM-dd"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input  v-model="examForm.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 20}"/>
      </el-form-item>
      <el-form-item style="text-align: center" label-width="0">
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import { getExam,editExam,getCourseExamTypeOption } from '@/api/exam/exam'
import { getBClassListByDeptGroup, listAllBClass } from '@/api/basedata/bclass'

export default {
  name : 'editExam',
  props: ["examId"],
  data()  {
    return {
      classOptions:[], //班级下拉框
      courseOptions : [], //课程下拉框
      examForm : { //表单内容
        id: null,
        name:'',
        classIds:[],
        courseOpt: [],
        startTime:'',
        endTime:'',
        remark: ''
      },
      rules: { //表单验证
        name: [
          {required: true, message: '请输入考试名称', trigger: 'blur'}
        ],
        classIds: [
          {required: true, message: '请选择考试班级', trigger: 'change'}
        ],
        courseOpt: [
          {required: true, message: '请选择考试课程', trigger: 'change'}
        ],
      },
    }
  },
  created() {
    //班级下拉框赋值
    getBClassListByDeptGroup().then(resp => {
      this.classOptions = resp.data;
    })

    //课程下拉框赋值
    getCourseExamTypeOption().then(res=> {
      this.courseOptions = res.data;
    })

    //编辑查询考试数据
    if(this.examId !=='') {
      getExam(this.examId).then(response => {
        this.examForm = response.data
      })
    }
  },
  methods : {
    //表单提交
    submitForm() {
      this.$refs.examForm.validate((valid) => {
        if (valid) {
          editExam(this.examForm).then(()=> {
            this.$message.success('保存成功！');
            this.$emit('editExamSuccess');
          })
        }
      });
    },
  }
}
</script>

<style scoped>
</style>
